<template>
    <div class="page-index" id="page-index">
        <div class="header fix-header">渔愉鱼真假药查询平台</div>
        <div class="panel">
            <div class="panel-header">
                <el-row class="clear">
                    <el-col :xs="24" :sm="24" :md="6" :lg="6">
                        <div class="form-label v-middle">
                            当前状态：
                            <el-select v-model="filter.status" class="form-select" @change="getMedicineProductList(1)">
                                <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value" />
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="12" :md="4" :lg="4" class="m-t-10">
                        <el-select v-model="filter.type" class="form-select">
                            <el-option v-for="item in searchTypeArr" :key="item.value" :label="item.text" :value="item.value" />
                        </el-select>
                    </el-col>
                    <el-col :xs="16" :sm="12" :md="6" :lg="6" class="m-t-10">
                        <div class="input-wrapper">
                            <div class="input-item clear">
                                <input type="text" v-model="filter.phone" />
                                <button @click="search">搜索</button>
                            </div>
                            <div class="close-wrapper" @click="reset" v-if="filter.phone">X</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="panel-body m-t-10">
                <el-table
                    v-loading="loading"
                    :data="productSearchList"
                    class="b-b"
                    stripe
                    border
                    style="width: 100%"
                    >
                    <el-table-column
                    label="商品正面图"
                    >
                        <template slot-scope="scope">
                            <a target="_blank">
                                <el-image
                                    style="width: 80px; height: 80px"
                                    :src="scope.row.aheadImageUrl"
                                    :preview-src-list="frontImgList"
                                    >
                                </el-image>
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="商品背面图"
                    >
                        <template slot-scope="scope">
                            <a target="_blank">
                                <el-image
                                    style="width: 80px; height: 80px"
                                    :src="scope.row.backImageUrl"
                                    :preview-src-list="backendImgList"
                                    >
                                </el-image>
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="当前状态"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.status == 1 ? '未联系' : '已联系' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="姓名"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.name || '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="联系电话"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.phone || '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" v-if="scope.row.status == 1" size="mini" @click="confirmContact(scope.row.id)">确认联系</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="panel-footer clear" v-if="pagingOptions.total > 0">
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagingOptions.pageNo"
                        :page-sizes="pagingOptions.pageSizes"
                        :page-size="pagingOptions.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagingOptions.total">
                    </el-pagination>
                </div>
            </div>
            <el-dialog
                :visible="isShowLoginForm"
                center
                :width="dialogWidth"
                :show-close="isShowClose"
                >
                <el-form ref="submitInfo" :model="submitInfo" :rules="submitForm">
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="submitInfo.password" placeholder="请输入密码" type="password" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="success" @click="submitLoginForm">提交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Index',
    data() {
        const initPassword = 'yudada2019'
        const checkPassword = (rule, value, callback) => {
            if (!value || value != initPassword) {
                callback(new Error("请输入正确的密码"))
            } else {
                callback()
            }
        }
        return {
            baseUrl: 'http://happyfish.yudada.com/',
            frontImgList: [],
            backendImgList: [],
            statusList: [
                { text: '全部', value: 0 },
                { text: '未处理', value: 1 },
                { text: '已处理', value: 2 }
            ],
            searchTypeArr: [
                { text: '手机号', value: 1 },
                { text: '姓名', value: 2 }
            ],
            filter: {
                type: 1,
                status: 0,
                phone: ''
            },
            loading: false,
            productSearchList: [],
            pagingOptions: {
                pageSizes: [10, 20, 50, 100],
                limit: 10,
                total: 0,
                pageNo: 1
            },
            isShowLoginForm: false,
            dialogWidth: '95%',
            submitInfo: {
                password: ''
            },
            isShowClose: false,
            submitForm: {
                password: [
                    {  required: true, validator: checkPassword, trigger: 'blur' } 
                ],
            }
        }
    },
    created() {
        this.getMedicineProductList()
    },
    methods: {
        // 获取商品列表
        getMedicineProductList(pageNo, pageSize) {
            pageNo && (this.pagingOptions.pageNo = pageNo)
            pageSize && (this.pagingOptions.limit = pageSize)
            const params = {
                pageSize: this.pagingOptions.limit,
                pageNo: this.pagingOptions.pageNo
            }
            this.filter.status && (params.status = this.filter.status)
            if (this.filter.phone) {
                params[this.filter.type == 1 ? 'phone' : 'name'] = this.filter.phone
            }
            this.$axios({
                url: `${this.baseUrl}fish/medicine/list`,
                method: 'get',
                params
            })
                .then((response) => {
                    const res = response.data
                    if (res.code != 1) {
                        this.$message({
                            message: res.message || 'Error',
                            type: 'error',
                            duration: 5 * 1000
                        });
                        return
                    }
                    this.productSearchList = res.data.records
                    this.pagingOptions.total = res.data.total
                    this.pagingOptions.pageNo = res.data.pageNo
                    this.productSearchList.length && this.productSearchList.map((item) => {
                        this.frontImgList.push(item.aheadImageUrl)
                        this.backendImgList.push(item.backImageUrl)
                    })
                })
                .catch((error) => {
                    this.$message({
                        message: error.message,
                        type: 'error',
                        duration: 5 * 1000
                    })
                })
        },
        search() {
            const vm = this
            let err = ''
            if (vm.filter.type == 1 && vm.filter.phone.length !== 11) {
                err = '手机号必须输入11位'
            }
            if (vm.filter.type == 2 && !vm.filter.phone) {
                err = '请输入姓名'
            }
            if (err) {
                vm.$message({
                    message: err,
                    type: 'warning'
                })
                return
            }
            vm.getMedicineProductList(1)
        },
        reset() {
            const vm = this
            vm.filter.phone = ''
            vm.getMedicineProductList(1)
        },
        // 切换页码大小
        handleSizeChange(val) {
            const vm = this
            vm.getMedicineProductList(1,val)
        },
        // 切换当前页
        handleCurrentChange(val) {
            const vm = this
            vm.getMedicineProductList(val)
        },
        // 确认联系
        confirmContact(id) {
            const vm = this
            vm.$axios({
                url: `${this.baseUrl}fish/medicine/read/${id}`,
                method: 'put',
            })
                .then((response) => {
                    const res = response.data
                    if (res.code != 1) {
                        this.$message({
                            message: res.message || 'Error',
                            type: 'error',
                            duration: 5 * 1000
                        });
                        return
                    }
                    vm.$message({
                        message: '确认成功',
                        type: 'success',
                        duration: 5 * 1000
                    })
                    vm.getMedicineProductList(1)
                })
                .catch((error) => {
                    this.$message({
                        message: error.message,
                        type: 'error',
                        duration: 5 * 1000
                    })
                })
        },
        // 新增
        // addProductSearch() {
        //     const vm = this
        //     vm.$router.push({
        //         path: `/search`
        //     })
        // },
        // 提交
        submitLoginForm() {
            const vm = this
            if (vm.isSubmit){
                return
            }
            vm.isSubmit = true
            setTimeout(() => {
                vm.isSubmit = false
            }, 4000)
            vm.$refs.submitInfo.validate(valid => {
                if (valid) {
                    vm.resetForm()
                    vm.resetSubmitInfo()
                    vm.isShowLoginForm = false
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm() {
            const vm = this
            vm.$refs.submitInfo.resetFields()
        },
        resetSubmitInfo() {
            const vm = this
            vm.submitInfo.password = ''
        }
    }
}
</script>
<style scoped>
.page-index {
  padding: 50px 10px;
}
.page-index .header {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #409EFF;
  border-bottom: 1px solid rgba(216, 216, 216, 0.5);
}
.page-index .form-label {
  display: inline-block;
  font-size: 14px;
  color: #555;
}
.page-index .form-select {
  width: 100px;
}
.page-index .input-wrapper {
  position: relative;
}
.page-index .input-wrapper .input-item input,
.page-index .input-wrapper .input-item button {
  vertical-align: top;
  display: inline-block;
  border: none;
  font-size: 14px;
  color: #555;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}
.page-index .input-wrapper .input-item input {
  border: 1px solid #DCDFE6;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-left: 5px;
  outline: none;
}
.page-index .input-wrapper .input-item button {
  background: none;
  border: 1px solid #DCDFE6;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 0 10px;
  border-left: 0;
  background: #F5F7FA;
  outline: none;
}
.page-index .input-wrapper .close-wrapper {
  position: absolute;
  top: 0;
  left: 130px;
  width: 30px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  color: #555;
}
.page-index .block {
  text-align: center;
}
.page-index .add-product-btn {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background: #409EFF;
  border-radius: 6px;
}
.dialog-footer {
  width: 100%;
  vertical-align: top;
  font-size: 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .m-t-10 {
    margin-top: 10px;
  }
}

</style>
